<template>
  <el-dialog
      top="10vh"
      width="800px"
      title="订单确认"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <div class="order-info">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ currentOrder.order_no }}</el-descriptions-item>
        <el-descriptions-item label="旅游产品">{{ currentOrder.travel_name }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ currentOrder.contact_name }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentOrder.contact_phone }}</el-descriptions-item>
        <el-descriptions-item label="旅游日期">{{ currentOrder.travel_date }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag v-if="currentOrder.status === 'paid'" type="primary">待确认</el-tag>
          <el-tag v-else type="warning">{{ currentOrder.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="成人数量">{{ currentOrder.adult_count }}</el-descriptions-item>
        <el-descriptions-item label="儿童数量">{{ currentOrder.child_count }}</el-descriptions-item>
        <el-descriptions-item label="房间数量">{{ currentOrder.room_count }}</el-descriptions-item>
        <el-descriptions-item label="支付金额">¥{{ currentOrder.payment_amount }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <SubmitForm
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @change="handleFormChange"
        @save="onSave"
        @close="dialogValue = false"
    />

  </el-dialog>
</template>

<script>
import {http} from '@/api'

export default {
  name: 'TravelOrderShip',
  data() {
    return {
      dialogValue: false,
      currentOrder: {},
      ruleForm: {},
      rules: {
        confirm_remark: [{required: true, message: '确认备注不能为空'}],
      },
      formList: [
        // {
        //   label: '确认备注',
        //   prop: 'confirm_remark',
        //   name: 'textarea',
        //   colSpan: 24,
        //   placeholder: '请输入确认备注信息，如：已确认行程安排、酒店预订等'
        // },
        // {
        //   label: '预计出发时间',
        //   prop: 'estimated_departure_time',
        //   name: 'datetime',
        //   colSpan: 24,
        //   placeholder: '请选择预计出发时间'
        // },
        // {
        //   label: '导游信息',
        //   prop: 'guide_info',
        //   name: 'input',
        //   colSpan: 24,
        //   placeholder: '请输入导游姓名和联系方式'
        // }
      ]
    }
  },
  methods: {
    handleFormChange({key, val}) {
      // 处理表单变化
    },
    open(row) {
      this.currentOrder = row;
      this.dialogValue = true;
      this.ruleForm = {
        confirm_remark: '',
        estimated_departure_time: '',
        guide_info: ''
      };
    },
    onSave() {
      const updateData = {
        id: this.currentOrder.id,
      };
      
      http.travelOrder.confirm(updateData).then(res => {
        this.$message.success('订单确认成功');
        this.dialogValue = false;
        this.$emit('get-page');
      });
    }
  }
}
</script>

<style scoped lang="scss">
.order-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style> 